<template>
  <div class="star" :class="starType">
     <span v-for="itemClass in itemClasses" :class="itemClass"
     class="star-item" track-by="$index"></span>
  </div>
</template>
<script type="text/ecmascript-6">
  const LENGTH = 5;
  const CLS_ON = 'on';
  const CLS_HALF = 'half';
  const CLS_OFF = 'off';
  export default {
      props: {
        size: {
          type: Number
        },
        score: {
          type: Number
        }
      },
      computed: {
        starType() {
           return 'star-' + this.size;
        },
        itemClasses() {
           let result = [];
           let score = Math.floor(this.score * 2) / 2;
           let hasDecimal = score % 1 !== 0;
           let integer = Math.floor(score);
           for (let i = 0; i < integer; i++) {
             result.push(CLS_ON);
           }
           if (hasDecimal) {
             result.push(CLS_HALF);
           }
           while (result.length < LENGTH) {
             result.push(CLS_OFF);
           }
           return result;
        }
      }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/minxin"
   .star
     font-size: 0
     .star-item
       display:inline-block
       background-repeat: no-repeat
     &.star-48
        .star-item
           width: 20px
           height: 20px
           margin-right: 22px
           background-size: 20px 20px
           &:last-child
              margin-right: 0
           &.on
             bg-image('star48_on')
           &.half
             bg-image('star48_half')
           &.off
             bg-image('star48_off')
     &.star-36
       .star-item
         width: 15px
         height: 15px
         margin-right: 6px
         background-size: 15px 15px
         &:last-child
           margin-right: 0
         &.on
           bg-image('star36_on')
         &.half
           bg-image('star36_half')
         &.off
           bg-image('star36_off')
     &.star-24
       .star-item
         width: 10px
         height: 10px
         margin-right: 3px
         background-size: 10px 10px
         &:last-child
           margin-right: 0
         &.on
           bg-image('star24_on')
         &.half
           bg-image('star24_half')
         &.off
           bg-image('star24_off')
</style>
